<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{background: yellow;}
        .box p{background: lime;}
    </style>
</head>
<body>
    <div class="box">
        <h2>标题</h2>
        <a href="#">超链接</a>
        <p>段落</p>
        <span>特殊文本</span>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>  
    </div>
    <script>
        
        // 操作节点是DOM编程的核心部分，允许开发者动态地添加、删除或修改页面的元素  
        // 即 增 删 改 查(获取*6)
        var box = document.querySelector(".box");
        // 增 ->  即 创建添加
            // -> 1 创建
                // 1.1 文本节点  document.createTextNode("文本内容")
                // 1.2 元素节点  s.createElement("标签名")
            // -> 2 添加  p->parent父  s->son子
                // 2.1 添加再最后  p.appendChild(s)
                // 2.2 添加再任意位置 -> 插入节点 -> 插在xxx之前
                    // p.insertBefore(who , where)  -> 插入谁 插在哪
        // 需求  给box的最后添加一个 nav 元素  且 nav元素的内容是 我是动态添加
        // var nav = document.createElement("nav")
        // var navCon = document.createTextNode("我是动态创建添加")
        // nav.appendChild(navCon)
        // box.appendChild(nav)
        // console.log(nav)

        // 需求  给box下的span后面添加一个strong
        // var strong = document.createElement("strong")
        // strong.innerHTML = `我是动态创建的strong 位置再span后`
        // box.lastElementChild.insertBefore( strong ,  box.lastElementChild.lastElementChild )

        // 删 ->  即 删除   p.removeChild(s)
        // 需求  再box下删除a
        // var a = document.querySelector("a");
        // var a = box.firstElementChild.nextElementSibling
        // box.removeChild(a)

        // 改 -> 即 替换修改   p.replaceChild(new , old)
        // 需求: 将box下的 p 替换成 nav
        // var nav = document.createElement("nav");
        // nav.innerHTML = "我是创建的nav代替了原来的p段落"
        // var p = document.querySelector("p")
        // box.replaceChild( nav , p )

        // 克隆  who.cloneNode()   
            // -> ()浅克隆/拷贝   只克隆当前元素一层(壳子)
            // -> (true) 深克隆   从里到外 包括样式
        var copyBox = box.cloneNode(true);
        console.log(copyBox)
        document.body.appendChild(copyBox)
    </script>
</body>
</html>